<script setup>
import {useRouter,useRoute} from "vue-router"
import {getAssetsImages} from "../utils/utils.js"
import HistorySvg from "./svg/HistorySvg.vue"
import CollectSvg from "./svg/CollectSvg.vue"
import {ref} from "vue";
import AuthApi from "@/api/Auth"
import {useLoginStore} from "@/store/index.js";
import {ElMessage, ElMessageBox} from "element-plus";
import LoginSvg from "@/components/svg/LoginSvg.vue";
const keywords = ref()
const router = useRouter()
const route = useRoute()
const change =()=>{

}

const {getUserLoginInfo,openLoginDialog,userLogout} = useLoginStore()
const userInfo = getUserLoginInfo()
const toSearch = ()=>{
  router.push({path:'/search',query:{keywords:keywords.value}})
}
const toUserCollectPage = ()=>{
  router.push('/profile/collection')
}

const logout = ()=>{
  ElMessageBox.confirm(
      '确定要退出登录吗？',
      '退出登录',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }
  ).then(() => {
    AuthApi.exitLogin().then(res => {
      userLogout()
      router.push("/")
    })

  })
}

</script>
<template>
  <header class="header">
    <div class="logo-box" @click="router.push('/')" >
      <img :src="getAssetsImages('logo2.png')"  style="width: 60px;height: 60px;" />
    </div>
    <!--   搜索框 -->
    <div class="search-box" :style="{visibility:route.meta.hiddenHeaderSearch?'hidden':'visible'}">
      <input type="text" v-model="keywords" class="search-input">
      <el-button class="search-btn" icon="Search" @click="toSearch"></el-button>
    </div>
    <!--  右边导航  -->
    <div class="right-box">

      <el-dropdown v-if="userInfo.isLogin">
        <!--  个人头像    -->

        <el-avatar  :size="36" class="nav-item"
                   @click="change"
                   :src="userInfo.avatar"/>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="router.push('/profile')">个人中心</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>

      </el-dropdown>
      <div class="nav-item" v-else @click="openLoginDialog()">
        <LoginSvg class="svg "/>
      </div>
      <!--  历史记录    -->
      <div class="nav-item" @click="router.push('/history')">
        <HistorySvg class="svg"/>
      </div>
      <div class="nav-item" @click="toUserCollectPage">
        <CollectSvg class="svg "/>
      </div>

    </div>
  </header>
</template>

<style scoped lang="less">

.header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.logo-box{
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 80px;
  z-index: 1000;
  cursor: pointer;
}
.search-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  width: 280px;
  height: 35px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, .1);

  .search-input {
    color: white;
    padding-left: 18px;
    width: 75%;
    font-size: 14px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    height: 35px;
    outline: none;
    border: none;
    background: none;
  }

  .search-btn {
    font-size: 16px;
    color: rgba(255, 255, 255, .6);
    width: 25%;
    height: 100%;
    border-radius: 20px;
    border: none;
    background: none;
  }
}

.right-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 40px;
  .nav-item {
    margin-right: 30px;
    cursor: pointer;
  }

  .svg {
    width: 30px;
    height: 30px;
  }
}
</style>
<style lang="less" module>
//@backgroundColor-black: white;
</style>
